<template>
  <div class="home" @click="homeClick">
    <NavBottom @openStart="openStart" />
    <Start ref="startRef" />
    <div class="desktop-panel" >
      <DesktopIcon v-for="icon in desktopIconList" :key="icon.id" :iconInfo="icon" />
    </div>
    <WinContent v-for="win in winConfigs" :key="win.wid" :winInfo="win" />
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import NavBottom from '@/components/nav-bottom'
import DesktopIcon from '@/components/desktop-icon'
import WinContent from '@/components/win-content'
import Start from './cpns/start.vue'

import { useWindowStore } from '@/store/window'
import { useDesktopIcon } from './hooks/use-desktop-icon'
import { importIcon } from '@/utils/import-icon'

const windowStore = useWindowStore()
const startRef = ref<InstanceType<typeof Start>>()
const openStart = () => {
  startRef.value!.showStart = !startRef.value!.showStart
}

// 生成桌面图标 并匹配图标组件路由
const { desktopIconList } = useDesktopIcon()
// const iconList = importIcon()
// windowStore.changeDesktopIconAndAddRoute(iconList)
// const desktopIconList = computed(() => windowStore.desktopIconList)

// 打开图标，生成winConfig存放在windowStore。home组件设置响应式获取
const winConfigs = computed(() => windowStore.winConfigs)


// 点击桌面时收起start菜单
const homeClick = () => {
  startRef.value!.showStart = false
  windowStore.desktopIconList.map(item => {
    item.contextMenu = false
  })
}
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.desktop-panel {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 34px;
  z-index: 1;
  overflow: hidden;
  perspective: 500px;
}
</style>
